<!--  线 + 柱混合图 -->
<template>
  <el-card>

    <div :id="id" :class="className" :style="{ height, width }" />
  </el-card>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';

import { ref, watch, onMounted, onBeforeUnmount, onActivated, markRaw } from 'vue';

const company = ref([]);
const processedData = ref([]);
const chart: Ref<echarts.ECharts | null> = ref(null);

const props = defineProps({
  id: {
    type: String,
    default: 'charts_interface'
  },
  className: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '200px',
    required: true
  },
  height: {
    type: String,
    default: '200px',
    required: true
  },
  charData: {
    type: Array as () => any,
    default: () => []
  }
});
const option = {
  xAxis: {
    type: 'category',
    axisLabel: { interval: 0, rotate: 40 }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      symbolSize: 10,
      type: 'line'
    }
  ],
  tooltip: {
    trigger: 'item'
  }
};

const handleResize = () => {
  setTimeout(() => {
    if (chart.value) {
      chart.value.resize();
    }
  }, 100);
};


onMounted(async () => {
  chart.value = markRaw(echarts.init(document.getElementById(props.id) as HTMLDivElement));
  chart.value.setOption(option);
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});

onActivated(() => {
  handleResize();
});

// 监听 chartData 的变化并更新图表
watch(
  () => props.charData,
  (newData) => {
    console.log(newData);
    if (newData) {
      //更新 option
      chart.value.setOption({
        xAxis: {
          data: newData.xaxis
        },
        series: [
          {
            data: newData.series
          }
        ]
      });
    }
  }
);
</script>

<style lang="scss" scoped></style>
